<template>
	<el-main class="nopadding" style="overflow: hidden; margin: 15px 0px;">
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jdEcharts height="300px" :option="option"></jdEcharts>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import jdEcharts from '@/components/jdEcharts';

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		title: "热门应用",
		icon: "el-icon-data-line",
		description: "",
		components: {
			jdEcharts
		},
		props:{
			data:Object
		},
		data() {
			return {
				option: {
					title: {
						text: '热门应用',
						subtext: '本季度应用排行榜(Top10)',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							interval:0,
							rotate:25
						},
						data: ['引才通','会议申请','智慧大院','人才应用','测试应用','理财通','请假通','人事招聘','人才应用', '会议申请']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							data: [525, 500, 480, 420, 360, 254, 168, 158, 150, 85],
							type: 'bar',
							barWidth: '18px',
						}
					]
				},
			}
		},

		watch:{
			data:{
				handler(){
					if (typeof(this.data.rank) != 'undefined'){
						this.option.xAxis.data = this.getData(this.data.rank,"key")
						this.option.series[0].data = this.getData(this.data.rank,"val")
					}
				},
				deep:true
			}
		},
		mounted() {

		},
		methods: {
			getData(arr,type){
				let data =[]
				for (let i = 0; i < arr.length; i++) {
					if (type == 'key'){
						data.push(arr[i].key)
					}else {
						data.push(arr[i].value)
					}
				}
				return data;
			}
		},
		beforeUnmount() {

		}
	}
</script>

<style lang="scss">

</style>
